<template>
  <div class="gray-box">
    <UserTop></UserTop>
    <div class="container">
    <div class="content">
      <div class="avatar-box">
        <div class="img-box">
          <img src="../../../assets/avatar.jpeg" alt="" />
        </div>
        <div class="r-box">
          <h3>修改头像</h3>
          <input
            type="button"
            value="上传头像"
            readonly="readonly"
            class="upload-btn"
          />
        </div>
      </div>
    </div>
    </div>
  </div>
</template>

  <script>
import UserTop from "../components/usertop/index.vue";
export default {
  name: "UserInformation",
  components: { UserTop },
  data() {
    return {
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      squareUrl:
        "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
      sizeList: ["large", "medium", "small"],
    };
  },
};
</script>

<style lang='less' scoped>
.gray-box {
     .container {
    background-color: #fff;
    border-radius: 8px;
  .content {
    font-size: 14px;
    color: #666;
    width: 100%;
    background-color: #fff;
    .avatar-box {
      height: 124px;
      margin: 0 30px 30px;
      border-bottom: 1px solid #dadada;
      line-height: 30px;
      display: flex;
      align-items: center;
      .img-box {
        width: 80px;
        height: 80px;
        border-radius: 5px;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
          border: none;
          outline: none;
        }
      }
      .r-box {
        margin-left: 20px;
        h3 {
          font-size: 18px;
          font-weight: 400;
          color: #333;
          margin-left: 13px;
        }
        .upload-btn {
          border: 1px solid #5c81e3;
          border-radius: 4px;
          font-size: 12px;
          color: #fff;
          background-color: #678ee7;
          background-image: linear-gradient(180deg, #678ee7, #5078df);
          width: 100px;
          height: 30px;
          line-height: 28px;
          vertical-align: middle;
        }
      }
    }
  }}
}
</style>
